<template>
  <div>

    <div slot="header" class="clearfix">
        <span>single page 用户列表</span>
        <el-button style="float: right; padding: 10px 30px" type="text" @click="dialogVisible=true">添加</el-button>
    </div>
      <el-dialog title="新增用户" :visible.sync="dialogVisible">
        <user-add></user-add>
      </el-dialog>
    <el-row :gutter="5">
      <el-col :span="22" :offset="0">
        <el-table
           height="600"
          :data="userlist"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="用户ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="用户名"
            label="用户名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="工作组"
            label="工作组">
          </el-table-column>
          <el-table-column
            prop="用户状态"
            label="用户状态">
            <template scope="scope">
              {{ scope.row.用户状态 | userStatusFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="入职时间" label="入职时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150" class="operation">
            <template slot-scope="scope">
              <el-button @click="handleEidt(scope.row.id)" type="text" size="small"><i class="el-icon-edit"></i>
                编辑
              </el-button>
              <el-button @click="handleDel(scope.row.id)" type="text" size="small"><i class="el-icon-delete"></i>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="15"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <hr/>
    <router-view></router-view>

  </div>

</template>

<script>
export default {
  name: "UserListSingle",
  data() {
    return {
      dialogVisible:false,
      userlist: [],
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
    }
  },
  computed:{
    total(){
      return this.userlist.length
    }
  },
  filters: {
    userStatusFilter: function (value) {
      switch (value) {
        case 1:
          return '在职';
        case 2:
          return '见习';
        case 0:
          return '离职';
        default:
          return "未知状态";
      }
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    //Get 请求获取所有用户列表
    getUserList() {
      this.axios.get('/api2/users/').then(res => {
        this.userlist = res.data
        console.log(res.data)
      }).catch(
      )
    },
    //修改用户
    handleEidt(userID) {
      console.log('修改用户ID', userID)
      this.$router.push('/user/edit/' + userID)
    },
    handleDel(userID) {
      console.log('删除ID', userID)
      this.axios.delete('/api/user/' + userID + '/').then(response => {
        console.log(response)
        this.$message.success("删除用户成功")
      }).catch(reason => {
        console.log(reason)
        this.$message.error("删除用户失败", reason)
      })
      this.getUserList()
    },
  }
}
</script>

<style scoped>

</style>
